<template>
  <div class="login">
    <header>
      <van-nav-bar
        :title="isTitle ? '登录' : '注册'"
        left-text="返回"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-nav-bar>
    </header>
    <img src="../../assets/logo.png" class="logo" width="100" alt="" />
    <div class="login-form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <!-- 验证码 -->
          <div
            class="yanzheng"
            style="display: flex; width: 100%; margin-top: 10px"
          >
            <div class="identify">验证码</div>
            <input type="text" placeholder="验证码" v-model="identifyVal" />
            <div class="code" @click="refreshCode" style="width: 112px">
              <Identify :identifyCode="identifyCode"></Identify>
            </div>
          </div>
        </van-cell-group>
        <div style="margin: 16px">
          <p class="link-register" @click="isTitle = !isTitle">
            {{ isTitle ? "立即注册" : "已有账号，立即登录" }}
          </p>
          <van-button round block type="primary" native-type="submit">{{
            isTitle ? "登录" : "注册"
          }}</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showDialog } from "vant";
import { showNotify } from "vant";

import Identify from "../../components/Identify.vue";
import { register, login } from "../../api/index.js";
// let userinfo = reactive({
//   username: 17681073015,
//   password: 123456,
//   isTitle: true,
//   identifyVal: "",
// });
let route = useRoute();
let router = useRouter();
let username=ref("17681073015")
let password=ref("123456")
let isTitle=ref(true)
let identifyVal=ref("")
// let { username, password, isTitle, identifyVal } = toRefs(userinfo);

let identifyCodes = "1234567890";
let identifyCode = ref("3212");
//改变随机验证码
const randomNum = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};
const makeCode = (o, l) => {
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)];
  }
};
const refreshCode = () => {
  identifyCode.value = "";
  makeCode(identifyCodes, 4);
};
onMounted(() => {
  identifyCode.value = "";
  makeCode(identifyCodes, 4);
});

//返回
let back = () => {
  router.replace("/home");
};

//登录/注册
let onSubmit = (values) => {
  if (isTitle.value) {
    if (identifyVal.value == identifyCode.value) {
      //登录接口
      login(username.value, password.value).then((res) => {
        console.log(res);
        if (res.resultCode == 200) {
          localStorage.setItem("mltoken", res.data);
          if(route.query.needback==1){
            router.back()
          }else{
            router.replace("/home")
          }
          showNotify({ type: "success", message: "登陆成功" });
          
        }
      });
    } else {
      showNotify({ type: "danger", message: "验证码错误请重新输入验证码" });
      identifyVal.value = "";
    }
  } else {
    if (identifyVal.value == identifyCode.value) {
      //注册接口
      register(username.value, password.value).then((res) => {
        console.log(res);
        if (res.resultCode == 200) {
          showNotify({ type: "success", message: "注册成功" });
          isTitle.value = true;
          identifyVal.value = "";
        }
      });
    } else {
      showNotify({ type: "danger", message: "验证码错误请重新输入验证码" });
      identifyVal.value = "";
    }
  }
};
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    padding: 0 0.26667rem;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 0.02667rem solid #dcdcdc;
  }

  .logo {
    width: 3.2rem;
    height: 3.2rem;
    display: block;
    margin: 36px auto 0;
  }

  .login-form {
    padding: 0 0.53333rem;

    .van-form {
      display: block;

      .identify {
        font-size: 15px;
      }

      input {
        font-size: 16px;
        padding-left: 26px;
        width: 80px;
        height: 34px;
        margin-right: 20px;
        border: none;
        border-bottom: 1px solid rgb(226, 221, 221);
      }

      input::-webkit-input-placeholder {
        color: #aab2bd;
        font-size: 14px;
      }
    }

    /deep/.cerify-code-panel {
      display: flex;
      margin-top: 0.42667rem;
      height: 100%;
      overflow: hidden;

      .verify-code {
        width: 40% !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 16px !important;
      }

      .verify-code-area {
        width: 54%;
        margin-left: 0.37333rem;

        .verify-input-area .varify-input-code {
          width: 2.4rem;
          height: 1.01333rem;
          border: 0.02667rem solid #e9e9e9;
          padding-left: 0.26667rem;
          font-size: 0.42667rem;
        }

        .verify-change-area {
          line-height: 1.17333rem;
          font-size: 12px;
        }
      }
    }

    :deep(.cerify-code-panel) {
      display: flex;
      margin-top: 0.42667rem;
      height: 100%;
      overflow: hidden;

      .verify-code {
        width: 40% !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 16px !important;
      }

      .verify-code-area {
        width: 54%;
        margin-left: 0.37333rem;

        .verify-input-area .varify-input-code {
          width: 2.4rem;
          height: 1.01333rem;
          border: 0.02667rem solid #e9e9e9;
          padding-left: 0.26667rem;
          font-size: 0.42667rem;
        }

        .verify-change-area {
          line-height: 1.17333rem;
          font-size: 12px;
        }
      }
    }
  }

  .link-register {
    float: left;
    font-size: 0.37333rem;
    margin-bottom: 0.53333rem;
    color: #1989fa;
    display: inline-block;
  }

  .van-button--round {
    background: rgb(27, 174, 174) !important;
    border-color: rgb(27, 174, 174) !important;
  }
}
.yanzheng {
  display: flex;
  align-items: center;
}
</style>
